<template>
  <div style="padding-top: 20px">
    <el-row>
      <el-col :span="2" :offset="21">
        <el-button type="text" class="iconfont icon-tuichu" style="font-size: 25px" @click="out"></el-button>
      </el-col>
    </el-row>
    <el-row style="height: 25px;">
    </el-row>
    <el-row>
      <el-col :span="6" :offset="9">
        <div class="block" style="text-align: center;font-size: 20px">
          <el-avatar shape="square" :size="125" :src="squareUrl" style="border-radius: 30px"></el-avatar>
          <span>{{ username }}</span>
        </div>
      </el-col>
    </el-row>
    <el-row style="height: 50px;">
    </el-row>
    <el-row>
      <el-col :span="10" :offset="2">
        <el-button style="height: 120px;width: 170px;padding: 0px;" disabled>
          <el-row>
            <el-col :span="3" :offset="2">
              <i class="iconfont icon-lishijilu_huaban" style="font-size: 30px"></i>
            </el-col>
          </el-row>
          <el-row style="height: 20px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 20px">
              历史记录
            </el-col>
          </el-row>
          <el-row style="height: 5px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 10px;color:#99a9bf;">
              查看近期观看历史
            </el-col>
          </el-row>
        </el-button>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-button style="height: 120px;width: 170px;padding: 0px;" disabled>
          <el-row>
            <el-col :span="3" :offset="2">
              <i class="iconfont icon-shoucang" style="font-size: 30px"></i>
            </el-col>
          </el-row>
          <el-row style="height: 20px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 20px">
              我的收藏
            </el-col>
          </el-row>
          <el-row style="height: 5px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 10px;color:#99a9bf;">
              查看近期收藏的文章
            </el-col>
          </el-row>
        </el-button>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="10" :offset="2">
        <el-button style="height: 120px;width: 170px;padding: 0px;" disabled>
          <el-row>
            <el-col :span="3" :offset="2">
              <i class="iconfont icon-shaohouzaikan" style="font-size: 30px"></i>
            </el-col>
          </el-row>
          <el-row style="height: 20px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 20px">
              稍后再看
            </el-col>
          </el-row>
          <el-row style="height: 5px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 10px;color:#99a9bf;">
              最近想看的文章
            </el-col>
          </el-row>
        </el-button>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-button style="height: 120px;width: 170px;padding: 0px;" disabled>
          <el-row>
            <el-col :span="3" :offset="2">
              <i class="iconfont icon-gexingzhuangban" style="font-size: 30px"></i>
            </el-col>
          </el-row>
          <el-row style="height: 20px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 20px">
              个性装扮
            </el-col>
          </el-row>
          <el-row style="height: 5px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 10px;color:#99a9bf;">
              更改皮肤及字体样式
            </el-col>
          </el-row>
        </el-button>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="10" :offset="2">
        <el-button style="height: 120px;width: 170px;padding: 0px;" @click="on">
          <el-row>
            <el-col :span="3" :offset="2">
              <i class="iconfont icon-guanyu" style="font-size: 30px"></i>
            </el-col>
          </el-row>
          <el-row style="height: 20px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 20px">
              关于软件
            </el-col>
          </el-row>
          <el-row style="height: 5px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 10px;color:#99a9bf;">
              关于此软件的具体信息
            </el-col>
          </el-row>
        </el-button>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-button style="height: 120px;width: 170px;padding: 0px;" @click="help">
          <el-row>
            <el-col :span="3" :offset="2">
              <i class="iconfont icon-help" style="font-size: 30px"></i>
            </el-col>
          </el-row>
          <el-row style="height: 20px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 20px">
              帮助
            </el-col>
          </el-row>
          <el-row style="height: 5px;">
          </el-row>
          <el-row>
            <el-col :span="3" :offset="2" style="font-size: 10px;color:#99a9bf;">
              如果你有小问题可以点下
            </el-col>
          </el-row>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "personal",
  data() {
    return {
      squareUrl: "",
      username: ''
    }
  },
  mounted() {
    try {
      this.squareUrl = require('D:/IDEA/SpringBoot+Vue/img/' + sessionStorage.getItem("username") + '.jpg')
    } catch (e) {
      this.squareUrl = require('../assets/img/default.png')
    }
    this.username = sessionStorage.getItem("username")
  },
  methods: {
    out() {
      sessionStorage.removeItem("token")
      sessionStorage.removeItem("username")
      this.$cookies.remove("token")
      this.$cookies.remove("username")
      this.$router.push("/home");
    },
    on() {
      this.$router.push('/on');
    },
    help() {
      this.$router.push('/help');
    }
  }
}
</script>

<style scoped>
</style>
